'use client'

import { useState } from 'react'
import Image from 'next/image'
import { useCart } from '../components/CartContext'
import toast from 'react-hot-toast'

// 模拟菜品数据
const menuItems = [
  {
    id: 1,
    name: '红烧肉',
    price: 48,
    category: '热菜',
    image: '/images/hongshaorou.jpg',
    description: '精选五花肉，红烧入味，肥而不腻'
  },
  {
    id: 2,
    name: '清蒸鲈鱼',
    price: 68,
    category: '热菜',
    image: '/images/qingzhengluyu.jpg',
    description: '新鲜鲈鱼，清蒸保持原汁原味'
  },
  {
    id: 3,
    name: '宫保鸡丁',
    price: 38,
    category: '热菜',
    image: '/images/gongbaojiding.jpg',
    description: '选用优质鸡肉，配以花生、干辣椒'
  },
  {
    id: 4,
    name: '麻婆豆腐',
    price: 32,
    category: '热菜',
    image: '/images/mapodoufu.jpg',
    description: '嫩滑豆腐，麻辣鲜香'
  },
  {
    id: 5,
    name: '水煮肉片',
    price: 58,
    category: '热菜',
    image: '/images/shuizhurou.jpg',
    description: '精选里脊肉，麻辣鲜香'
  }
]

const categories = ['全部', '热菜', '凉菜', '主食', '汤类', '饮品']

export default function MenuPage() {
  const [selectedCategory, setSelectedCategory] = useState('全部')
  const [searchQuery, setSearchQuery] = useState('')
  const { addItem } = useCart()

  const filteredItems = menuItems.filter(item => {
    const matchesCategory = selectedCategory === '全部' || item.category === selectedCategory
    const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         item.description.toLowerCase().includes(searchQuery.toLowerCase())
    return matchesCategory && matchesSearch
  })

  const handleAddToCart = (item: typeof menuItems[0]) => {
    addItem({
      id: item.id,
      name: item.name,
      price: item.price
    })
    toast.success(`已添加 ${item.name} 到购物车`)
  }

  return (
    <div className="min-h-screen bg-background py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* 搜索栏 */}
        <div className="mb-8">
          <input
            type="text"
            placeholder="搜索菜品..."
            className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

        {/* 分类选择 */}
        <div className="flex space-x-4 mb-8 overflow-x-auto pb-2">
          {categories.map(category => (
            <button
              key={category}
              className={`px-4 py-2 rounded-full whitespace-nowrap ${
                selectedCategory === category
                  ? 'bg-primary text-white'
                  : 'bg-white text-gray-700 hover:bg-gray-100'
              }`}
              onClick={() => setSelectedCategory(category)}
            >
              {category}
            </button>
          ))}
        </div>

        {/* 菜品列表 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredItems.map(item => (
            <div key={item.id} className="bg-white rounded-lg shadow-md overflow-hidden">
              <div className="relative h-48">
                <div className="absolute inset-0 bg-gray-200"></div>
                {/* 暂时使用占位图，后续替换为真实图片 */}
              </div>
              <div className="p-4">
                <div className="flex justify-between items-start">
                  <h3 className="text-lg font-semibold text-gray-900">{item.name}</h3>
                  <span className="text-primary font-bold">¥{item.price}</span>
                </div>
                <p className="mt-2 text-gray-600 text-sm">{item.description}</p>
                <div className="mt-4 flex justify-between items-center">
                  <span className="text-sm text-gray-500">{item.category}</span>
                  <button
                    className="bg-primary text-white px-4 py-2 rounded hover:bg-opacity-90 transition-colors"
                    onClick={() => handleAddToCart(item)}
                  >
                    加入购物车
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
} 